<template>
<!-- 第一级 -->
 <!-- <el-menu v-if="level==0" router 
  background-color="#F4F8FF" text-color="rgba(50, 50, 50, 1)"  active-text-color="#3D80FF" 
  :default-active='$route.fullPath' 
  > -->
  <el-menu v-if="level==0" router
  background-color="#F4F8FF" text-color="rgba(50, 50, 50, 1)"  active-text-color="#3D80FF" 
  :default-active='$route.matched[1].path' 
  >
    <template v-for="item in data">
      <el-submenu v-if="item.children&&item.children.length" 
        :key="item.id" :index="item.url">
        <div slot="title" :style="{'padding-left':(level+1)*10+'px'}">
		  <i class="el-icon-s-home" v-if="level==0"></i>
          <i class="el-icon-s-fold" v-else></i>
          <span >{{item.title}}</span>
        </div>
        <item :data="item.children" :level="level+1" @gopage="gopage"></item>
      </el-submenu>
      <el-menu-item v-else @click="gopage(item)"
        :key="item.id" :index="item.url" :style="{'padding-left':(level+1)*10+'px'}">
		<i class="el-icon-folder"></i>
        <span class="p">{{item.title}}</span>
      </el-menu-item>
    </template>
  </el-menu>
  <!-- 子级 -->
  <div v-else>
    <template v-for="item in data">
      <el-submenu v-if="item.children&&item.children.length" 
        :key="item.id" :index="item.url">
        <div slot="title" :style="{'padding-left':(level+1)*10+'px'}">
          <i class="el-icon-s-fold"></i>
          <span>{{item.title}}</span>
        </div>
        <item :data="item.children" :level="level+1" @gopage="gopage"></item>
      </el-submenu>
      <el-menu-item v-else @click="gopage(item)"
        :key="item.id" :index="item.url" :style="{'padding-left':(level+1)*10+'px'}">
		<i class="el-icon-folder"></i>
        <span class="p">{{item.title}}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  name: 'item',
  props:{
    data:{
      type:Array
    },
    level:{
      type:Number,
      default:0
    }
  },
  data(){
    return {
    }
  },
  created(){
  },
  methods:{
	  gopage(item){
		  this.$emit('gopage',item);
	  }
  }
}
</script>
<style lang="scss" scoped>
	//滚动条
	 ::-webkit-scrollbar {
	        width: 8px;
	        height: 100%;
	      }
	      ::-webkit-scrollbar-thumb {
	        /*滚动条里面小方块*/
	        border-radius: 5px;
	        -webkit-box-shadow: inset 0 0 5px #F4F8FF;
	        box-shadow: inset 0 0 5px #F4F8FF;
	        background: #F4F8FF;
	      }
	 
	      ::-webkit-scrollbar-track {
	        /*滚动条里面轨道*/
	        // -webkit-box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
	        // box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
	        // border-radius: 5px;
	        // background: rgba(14,54,94, 0.1);
	      }
	.el-menu{
		 border-right: transparent; 
		 // height: calc(100% - 5px);
		 height: 100%;
		 overflow: auto;
		 color: #323232;
		 // font-weight: bold;
		 
	}
	/deep/.el-submenu.is-opened .el-submenu__icon-arrow{
		  // color: rgba(255, 255, 255, 1);
	}
	/deep/.el-submenu__title:hover .el-submenu__icon-arrow{
		  color: rgba(255, 255, 255, 1);
	}
	/deep/.el-submenu:hover .el-submenu__title i{
		// color: rgba(255, 255, 255, 1);
	}
	/deep/.el-submenu__title{
		padding-left: 0!important;
	}
	// .el-submenu.is-opened /deep/>.el-submenu__title{
	// 	background: linear-gradient(90deg, #3D80FF 0%, #3DAFFF 100%)!important;
	// 	color: #fff!important;
	// }
	/deep/.el-submenu__title{
		 height: 40px; 
		 line-height: 40px;
		 font-size: 16px;
		 font-weight: bold;
	}
	//白色背景
	/deep/.el-submenu.is-opened .el-submenu__title{
		background-color: #fff!important;
	}
	/deep/.el-submenu.is-opened .el-menu-item{
		background-color: #fff!important;
	}
	.el-menu>.el-submenu.is-opened{
	  background:#fff;
	  border-radius:10px;
	  overflow:hidden;
	}
	
	/deep/.el-submenu__title:hover{
		background: linear-gradient(90deg, #3D80FF 0%, #3DAFFF 100%);
		border-radius: 10px;
		color: #fff!important;
	}
	/deep/.el-menu-item:hover{
		background: linear-gradient(90deg, #3D80FF 0%, #3DAFFF 100%);
		border-radius: 10px;
		color: #fff!important;
	}
	
	/deep/.el-menu-item{
		height: 40px!important;
		line-height: 40px!important;
		font-size: 12px;
		// font-weight: 500;
	}
	/deep/.el-menu-item.is-active{
		background: linear-gradient(90deg, #3D80FF 0%, #3DAFFF 100%)!important;
		color: #fff!important;
		border-radius: 6px!important;
	}
	// .p{
	// 	display: inline-block;
	//     padding: 0 30px;
	// 	height: 40px;
	// 	line-height: 40px;
	// 	box-sizing: border-box;
	//   }
	// /deep/.el-menu-item.is-active .p{
	//     background: linear-gradient(90deg, #3D80FF 0%, #3DAFFF 100%)!important;
	//     color: #fff!important;
	//     border-radius: 6px!important;
	// }
</style>	
